<template>
  <div id="echartContainer12"></div>
</template>

<script>
  export default {
    name: 'workyearByFamous',
    props: {
      workyearByFamous: {
        default: function () {
          return [[0, 0, 0, 0], [0, 0, 0, 0]]
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '工作经验要求',
            color: 'white',
            textStyle: {
              fontSize: 18,//字体大小
              color: '#ffffff',//字体颜色
              margin: [0, 0, 10, 10]
            },
          },
          tooltip: {},
          color: ["#7B09FA", "#3B8E9C"],
          radar: {
            name: {
              textStyle: {
                color: 'white',
                borderRadius: 0,
                padding: [0, 0]
              },
              nameGap: '3',//字与图形距离
            },
            shape: 'circle',
            indicator: [
              {name: '不限', max: 50},
              {name: '应届', max: 50},
              {name: '3年以下', max: 50},
              {name: '3-5年', max: 50},
              {name: '5-10年', max: 50},
              {name: '10年+', max: 50},
            ],
            radius: 50, //缩放比
            scale: true
          },
          series: [{
            name: '职位数',
            type: 'radar',
            areaStyle: {normal: {}},
            data: [
              {name: "知名企业", value: [0, 0, 0, 0, 0, 0]},
              {name: "非知名企业", value: [0, 0, 0, 0, 0, 0]},
            ]
          }]
        }

      }
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer12'));
        // 绘制基本图表

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);
        //             myChart.hideLoading();

      }
    },
    watch: {
      workyearByFamous: function () { //浏览器刷新页面后watch不生效

        var myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer12'));
        if (!this.workyearByFamous[0]) {
          return false
        }

        let famousCount = 0;
        this.workyearByFamous[0].forEach(number => {
          famousCount += number
        });
        this.workyearByFamous[0].forEach((number, index) => {
          this.workyearByFamous[0][index] = Math.ceil(number / famousCount * 100);
          if (this.workyearByFamous[0][index] > 50) {
            this.workyearByFamous[0][index] = 50
          }
        });

        let unfamousCount = 0;
        this.workyearByFamous[1].forEach(number => {
          unfamousCount += number
        });
        this.workyearByFamous[1].forEach((number, index) => {
          this.workyearByFamous[1][index] = Math.ceil(number / unfamousCount * 100);
          if (this.workyearByFamous[1][index] > 50) {
            this.workyearByFamous[1][index] = 50
          }
        });

        console.info("WorkYearByFamous Changed");
        myChart.setOption({
          series: [{
            data: [
              {name: "知名企业", value: this.workyearByFamous[0]},
              {name: "非知名企业", value: this.workyearByFamous[1]}
            ]
          }]
        });
      }


    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    }
  };
</script>
<style scoped>
  #echartContainer12 {
    width: 100%;
    height: 100%;
  }
</style>
